

import React, { useState } from 'react';
import Refund from '../refund'
import { OrderGoodsItem } from '@common/goodsItem';
import {  Toast, Modal } from 'antd-mobile';
import { useHistory } from 'react-router-dom';
import { handelOrder } from '@api/order';
import { useStore } from 'react-redux'

const { alert } = Modal

const OrderButton = (props) => {
  const co = props.color ? props.color : '#474747'
  return (
    <button
      onClick={e => { props.click() }}
      style={{
        width: '2.06rem',
        height: 'calc( 0.66rem * 10 / 10 )',
        // padding: '.15rem 0',
        lineHeight: '1',
        background: 'white',
        borderRadius: '.75rem',
        color: `${co}`,
        border: `solid 1px ${co}`,
        fontSize: '.32rem',
        marginLeft: '.26rem',
        textAlign: 'center'
      }}
    >
      {props.text}
    </button>
  )
}



const OrderItem = (props) => {

  const history = useHistory();

  const store = useStore();

  const { isApplet } = store.getState().appConfig

  const { item, index } = props

  let tk = item.refund


  console.log((tk.refund !== "0" && tk.PSO === '0'), (tk.refund === '2' && tk.SRO !== '0'))

  const [modal, setmodal] = useState(false)

  return (
    <>

      { modal && <Refund modal={modal} orderno={item.orderno} close={e => { orderHandel('refund') }} />}

      <div className="order-item " style={index === 0 ? { marginTop: ".4rem" } : {}} >

        <div className="" onClick={e => {
          isApplet ? window.navigateToWebWiew('/orderdetail/' + item.orderno) :
            history.push('/orderdetail/' + item.orderno)
        }}>
          <div className="item-top flex-row">
            <p className="orderno">订单号 {item.orderno}
              {/* 付款订单显示 {item.status !== '0' && item.orderno}  */}
            </p>

            {
              tk.refund === '0' &&
              <p className="order-status">
                {/* {item.status === "2" && '待付款'} */}
                {item.supply_status === "0" && '供应商待发货'}
                {/* {item.supply_status === "5" && '已取消'} */}
                {item.supply_status === "1" && '待收货'}
                {item.supply_status === "2" && '待评价'}
              </p>
            }



            {(tk.refund !== "0" && tk.PSO === '0') &&
              <p className="order-status">
                {(item.status && tk.refund === '1') && '平台处理中'}
                {(item.status && tk.refund === '-1') && '拒绝退款'}
                {(tk.refund === '2' && tk.SRO === '0') && '审核通过，处理款项中'}
                {(tk.refund === '2' && tk.SRO !== '0') && ' 平台已打款 '}
              </p>
            }

            {(tk.refund !== "0" && tk.PSO !== '0') &&
              <p className="order-status">
                {(item.status && tk.refund === '1') && '平台处理中'}
                {(item.status && tk.refund === '-1') && '拒绝退款'}
                {(tk.refund === '2' && tk.SRO === '0' && tk.SURO === null) && '等待供应商打款给平台'}
                {(tk.refund === '2' && tk.SRO === '0' && tk.SURO === '0') && '供应商已退款给平台'}
                {(tk.refund === '2' && tk.SRO === '0' && tk.SURO === '1') && '平台退款处理中'}
                {(tk.refund === '2' && tk.SRO !== '0' && tk.SURO === '2') && '退款成功'}
              </p>
            }



          </div>
          <div className="line"></div>
          <div className="item-goods">
            <OrderGoodsItem goods={item.good} marginStyle={{ marginTop: '.16rem' }} />
            <div className="item-goods-bottom">
              <div className="totalprice">
                总价￥{item.price}
              </div>
            </div>
          </div>

        </div>

        <div className="line"></div>

        {
          tk.refund === '0' &&
          <div className="item-option flex-row">

            {(item.supply_status === '1' && tk.refund === "0") && <OrderButton click={e => { orderHandel('refund') }} text="申请退款" color='#FF762E' />}
            {item.supply_status === '0' && <OrderButton text="提醒发货" click={e => { orderHandel('remind') }} />}
            {item.supply_status === '1' && <OrderButton text="确认收货" click={e => { orderHandel('confirm') }} />}
            {/* {item.status === '6' && <OrderButton text="查看物流" />} */}
            {item.supply_status === '2' && <OrderButton text="去评价" click={e => { orderHandel('evaluate') }} />}

          </div>
        }

        {
          tk.refund !== '0' &&
          <div className="item-option flex-row">
            {/* refund 退款字段 状态 ： 
              -1 拒绝
              0 为提交
              1 已提交
              2 通过
          */}

            {

              tk.refund !== '0' && <OrderButton click={e => { history.push(`/refund/${item.orderno}`) }} text="退款进度" />

            }

          </div>
        }

      </div>
    </>
  );


  function orderHandel(handel) {
    // 订单操作

    switch (handel) {
      case 'refund':
        setmodal(!modal)
        break;
      case 'remind':
        Toast.info('提醒发货成功', 1)
        break;
      case 'confirm':

        alert('确认收货？', '', [
          {
            text: '取消',
            onPress: () => {

            }
          },
          {
            text: '确认',
            onPress: () => {
              handelOrder({
                orderno: item.orderno
              }).then(res => {
                if (res.status === 200) {
                  Toast.success(res.msg, 1)
                  window.location.reload()
                } else {
                  Toast.offline('未知错误', 1)
                }
              })
            }
          }
        ])




        break;
      case 'evaluate':
        Toast.info('评价', 1)
        break;

      default:
        break;
    }

  }


}

export default OrderItem